/* 全局通用样式 */
/* 颜色变量 */

/* 行为相关颜色 */
// @tmc-color-main: #4664CD; // 主色调
@tmc-color-main: #007aff; // 主色调
@tmc-color-hint: #ff5a06; // 提示色
@tmc-color-orange: #feb951; // 辅助色：橘色
@tmc-color-blue: #2da0ff; // 辅助色：蓝色
@tmc-color-purple: #8287fe; // 辅助色：紫色
@tmc-color-cyan: #3cdcb9; // 辅助色：青色
@tmc-color-more: #f3f6fc; // 淡蓝色（表头颜色）

/* 文字基本颜色 */
@tmc-font-color-main: #333; // 重要区域
@tmc-font-color-secondary: #666; // 次重要区域
@tmc-font-color-white: #fff; // 反色
@tmc-font-color-grey: #999; // 辅助灰色，如加载更多的提示信息
@tmc-font-color-placeholder: #808080;
@tmc-font-color-disable: #c0c0c0;
@tmc-font-color-title: #2e3650; // 输入框前面的标题

/* 背景颜色 */
@tmc-bg-color: #ffffff;
@tmc-bg-color-grey: #f8f8f8;
@tmc-bg-color-hover: #f1f1f1; //点击状态颜色
@tmc-bg-color-mask: rgba(0, 0, 0, 0.4); //遮罩颜色

/* 边框颜色 */
@tmc-border-color: #c8c7cc;

/* 尺寸变量 */

/* 文字尺寸 */
@tmc-font-size-sm: 12px; //字体展示
@tmc-font-size-base: 14px; //解释说明
@tmc-font-size-lg: 18px; //正文字体
@tmc-font-size-max: 24px; //最大字体 标题字体

/* 图片尺寸 */
@tmc-img-size-sm: 40px;
@tmc-img-size-base: 52px;
@tmc-img-size-lg: 80px;

/* Border Radius */
@tmc-border-radius-small: 2px;
@tmc-border-radius-base: 10px;
@tmc-border-radius-lg: 20px;
@tmc-border-radius-circle: 50%;

/* 水平间距 */
@tmc-spacing-row-sm: 10px;
@tmc-spacing-row-base: 20px;
@tmc-spacing-row-lg: 30px;

/* 垂直间距 */
@tmc-spacing-col-sm: 8px;
@tmc-spacing-col-base: 16px;
@tmc-spacing-col-lg: 24px;

/* 透明度 */
@tmc-opacity-disabled: 0.3; // 组件禁用态的透明度

/* 文章场景相关 */
@tmc-title-font-color: #2c405a; // 文章标题颜色
@tmc-title-font-size: 12px;
@tmc-title-font-big-size: 14px;
@tmc-subtitle-font-color: #555555; // 二级标题颜色
@tmc-subtitle-font-size: 36px;
@tmc-paragraph-font-color: #3f536e; // 文章段落颜色
@tmc-paragraph-font-size: 30px;

// 页面最小宽度
.min-w-1450 {
	min-width: 1450px;
}

// 布局
// 外边距

.mt--40 {
	margin-top: -40px;
}

.margin-20 {
	margin: 20px;
}

.mx-10 {
	margin: 0 10px;
}

.mx-20 {
	margin: 0 20px;
}

.mx-30 {
	margin: 0 30px;
}

.mx-40 {
	margin: 0 40px;
}

.mx-50 {
	margin: 0 50px;
}

.my-4 {
	margin: 4px 0;
}

.my-10 {
	margin: 10px 0;
}

.my-20 {
	margin: 20px 0;
}

.my-30 {
	margin: 30px 0;
}

.my-40 {
	margin: 40px 0;
}

.my-50 {
	margin: 50px 0;
}

.m-auto {
	margin: 0 auto;
}

.mt-10 {
	margin-top: 10px;
}

.mt-20 {
	margin-top: 20px;
}
.mt-24 {
	margin-top: 24px;
}

.mt-30 {
	margin-top: 30px;
}

.mt-40 {
	margin-top: 40px;
}

.mt-50 {
	margin-top: 50px;
}

.mt-60 {
	margin-top: 60px;
}

.mt-70 {
	margin-top: 70px;
}

.mt-80 {
	margin-top: 80px;
}

.mt-100 {
	margin-top: 80px;
}

.mr-10 {
	margin-right: 10px;
}

.mr-20 {
	margin-right: 20px;
}

.mr-30 {
	margin-right: 30px;
}

.mr-40 {
	margin-right: 40px;
}

.mr-50 {
	margin-right: 50px;
}

.mr-70 {
	margin-right: 70px;
}

.mr-80 {
	margin-right: 80px;
}

.mb-5 {
	margin-bottom: 5px;
}

.mb-10 {
	margin-bottom: 10px;
}

.mb-14 {
	margin-bottom: 14px;
}

.mb-20 {
	margin-bottom: 20px;
}

.mb-30 {
	margin-bottom: 30px;
}

.mb-40 {
	margin-bottom: 40px;
}

.mb-50 {
	margin-bottom: 50px;
}

.mb-84 {
	margin-bottom: 84px;
}

.ml-10 {
	margin-left: 10px;
}

.ml-20 {
	margin-left: 20px;
}

.ml-30 {
	margin-left: 30px;
}

.ml-40 {
	margin-left: 40px;
}

.ml-50 {
	margin-left: 50px;
}

// 内边距
.p-20 {
	padding: 20px;
}

.px-10 {
	padding: 0 10px;
}

.px-20 {
	padding: 0 20px;
}

.px-30 {
	padding: 0 30px;
}

.px-40 {
	padding: 0 40px;
}

.px-50 {
	padding: 0 50px;
}

.py-10 {
	padding: 10px 0;
}

.py-20 {
	padding: 20px 0;
}

.py-30 {
	padding: 30px 0;
}

.py-40 {
	padding: 40px 0;
}

.py-50 {
	padding: 50px 0;
}

.pt-10 {
	padding-top: 10px;
}

.pt-20 {
	padding-top: 20px;
}

.pt-30 {
	padding-top: 30px;
}

.pt-40 {
	padding-top: 40px;
}

.pt-50 {
	padding-top: 50px;
}

.pr-10 {
	padding-right: 10px;
}

.pr-20 {
	padding-right: 20px;
}

.pr-30 {
	padding-right: 30px;
}

.pr-40 {
	padding-right: 40px;
}

.pr-50 {
	padding-right: 50px;
}

.pb-10 {
	padding-bottom: 10px;
}

.pb-20 {
	padding-bottom: 20px;
}

.pb-30 {
	padding-bottom: 30px;
}

.pb-40 {
	padding-bottom: 40px;
}

.pb-50 {
	padding-bottom: 50px;
}

.pb-100 {
	padding-bottom: 100px;
}

.pl-10 {
	padding-left: 10px;
}

.pl-20 {
	padding-left: 20px;
}

.pl-30 {
	padding-left: 30px;
}

.pl-40 {
	padding-left: 40px;
}

.pl-50 {
	padding-left: 50px;
}

.title {
	font-size: @tmc-title-font-size;
	color: @tmc-font-color-title;
}

.big-title {
	font-size: @tmc-title-font-big-size;
	color: @tmc-font-color-title;
}

.sub-title {
	font-size: @tmc-subtitle-font-size;
	color: @tmc-subtitle-font-color;
}

.paragraph {
	font-size: @tmc-paragraph-font-size;
	color: @tmc-paragraph-font-size;
}

.color-ddd {
	color: #dddddd;
}

//字体
.f18 {
	font-size: @tmc-font-size-max;
}

.f16 {
	font-size: @tmc-font-size-lg;
}

.f14 {
	font-size: @tmc-font-size-base;
}

.f12 {
	font-size: @tmc-font-size-sm;
}

// 行高
.line-12 {
	line-height: 12px;
}

.line-28 {
	line-height: 28px;
}

.line-42 {
	line-height: 42px;
}

//字体颜色
// #333333
.fc-main {
	color: @tmc-font-color-main;
}

.fc-special {
	color: @tmc-color-main;
}

.fc-eor {
	color: @tmc-color-hint;
}

// #666666
.fc-secondary {
	color: @tmc-font-color-secondary;
}
// #999999
.fc-grey {
	color: @tmc-font-color-grey;
}

.f-more {
	color: @tmc-color-more;
}

.bg-more {
	background-color: @tmc-color-more;
}

.fc-white {
	color: @tmc-font-color-white;
}

// 文本对齐
.tl {
	text-align: left;
}

.tc {
	text-align: center;
}

.tr {
	text-align: right;
}

// 清除浮动
.clearfix:after {
	zoom: 1;
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}

.dib {
	display: inline-block;
}

.db {
	display: block;
}

.di {
	display: inline;
}

@keyframes spin-load {
	from {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(180deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.cp {
	cursor: pointer;
}

.float-r {
	float: right;
}

.float-l {
	float: left;
}

.flex {
	display: flex;
}

.justify-between {
	justify-content: space-between;
}

.justify-center {
	justify-content: center;
}

.justify-around {
	justify-content: space-around;
}

.align-start {
	align-items: flex-start;
}

.align-center {
	align-items: center;
}

.align-end {
	align-items: flex-end;
}

.flex-column {
	flex-direction: column;
}

.flex-row {
	flex-direction: row;
}

.flex-1 {
	flex: 1;
}

.border-right {
	border-right: 1px solid #dddddd;
}
.border-left {
	border-left: 1px solid #dddddd;
}
.border-bottom {
	border-bottom: 1px solid #dddddd;
}

.border-top {
	border-top: 1px solid #dddddd;
}

.tab-border-bottom {
	border-bottom: 1px solid #eee;
}

.border {
	border: 1px solid #dddddd;
}

.radius-small {
	border-radius: @tmc-border-radius-small;
}

.radius-base {
	border-radius: @tmc-border-radius-base;
}

.radius-tl-base {
	border-top-left-radius: @tmc-border-radius-base;
}

.radius-tr-base {
	border-top-right-radius: @tmc-border-radius-base;
}

.radius-bl-base {
	border-bottom-left-radius: @tmc-border-radius-base;
}

.radius-br-base {
	border-bottom-right-radius: @tmc-border-radius-base;
}

.radius-lg {
	border-radius: @tmc-border-radius-lg;
}

.radius-tl-lg {
	border-top-left-radius: @tmc-border-radius-lg;
}

.radius-tr-lg {
	border-top-right-radius: @tmc-border-radius-lg;
}

.radius-bl-lg {
	border-bottom-left-radius: @tmc-border-radius-lg;
}

.radius-br-lg {
	border-bottom-right-radius: @tmc-border-radius-lg;
}

// 50%
.radius-circle {
	border-radius: @tmc-border-radius-circle;
}

.f-bold {
	font-weight: bold;
}

.f-weight-400 {
	font-weight: 400;
}

.f-weight-600 {
	font-weight: 600;
}

.bg-white {
	background: #ffffff;
}

.bg-grey {
	background: #f5f6f7;
}

.box-sizing {
	box-sizing: border-box;
}

.relative {
	position: relative;
}

.absolute {
	position: absolute;
}

.fixed {
	position: fixed;
}

.detail-align-right {
	min-width: 84px;
	text-align: right;
}

.w-100 {
	width: 100%;
}

.w-90 {
	width: 90%;
}

.w-85 {
	width: 85%;
}

.w-80 {
	width: 80%;
}

.w-75 {
	width: 75%;
}

.w-70 {
	width: 70%;
}

.w-60 {
	width: 60%;
}

.h-100 {
	height: 100%;
}

.h-50px {
	height: 50px;
}

.line-50 {
	line-height: 50px;
}

.h-28 {
	height: 28px;
}

.w-auto {
	width: auto;
}

.h-auto {
	height: auto;
}

/* 全局配置 */

/*全局按钮*/

// 新建按钮
.creat-button {
	background-color: #007aff;
	font-size: 12px;
	color: #ffffff;
}

// 重置按钮
.reset-button {
	font-size: 12px;
	color: #666666;
	border-color: #dddddd;
}

// 编辑按钮
.edit-button {
	width: 64px;
	height: 32px;
	background: #4664cd;
	color: #ffffff;
	font-size: 12px;
	font-weight: 400;
}

// table 分页器
.page-style {
	text-align: right;
	margin: 20px 20px 0 0;
}

.cursor-pointer {
	cursor: pointer;
}
